<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日程管理系统</title>
    <link rel="stylesheet" href="libs/jquery-ui-1.12.1.custom/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="libs/jquery.js"></script>
    <script src="libs/template-web.js"></script>
    <script src="libs/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <style>
        body{
            margin: 0;
            text-align: center;
            background-color: #444444;
        }
        #loading{
            /*display: none;*/
            font-size:30px; 
            margin-top: 300px;
            color: white;
            animation: xz 1s infinite linear;
        }
        @keyframes xz{
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }
        .date {
            margin: 0px;
            padding: 20px;
            padding-bottom: 0px;
            text-align: left;
        }
        
        .total {
            width: 650px;
            min-height: 500px;
            border-radius: 20px;
            background-color: white;
            margin: 40px auto;
            box-shadow: 5px 5px 20px;
            text-align: left;
            display: none;
        }
        
        .nav::after {
            display: block;
            content: "";
            visibility: hidden;
            height: 0px;
            clear: both;
        }
        
        .nav-left {
            float: left;
            width: 75%;
        }
        
        .nav-right {
            float: right;
            width: 22%;
        }
        
        .nav-right :nth-child(1) {
            margin-top: 20px;
            font-size: 20px;
            color: #696969;
        }
        
        .nav-right :nth-child(2) {
            color: #808080;
            margin-top: -10px;
        }
        
        #radio {
            padding: 20px;
            position: relative;
        }
        /*main*/
        
        main {
            min-height: 150px;
        }
        
        .paixu {
            list-style: none;
            padding: 0;
            max-height: 250px;
            overflow-y: auto;
        }
        
        .paixu li {
            min-height: 50px;
            margin: 10px;
            
        }
        /*footer*/
        
        footer {
            padding: 20px;
        }
        
        footer input {
            outline: none;
            width: 450px;
            height: 40px;
            border-width: 1px;
            border-color: #90909A;
            border-radius: 10px;
        }
        
        .submit {
            width: 60px;
            height: 40px;
        }
        #date{
            position: absolute;
            right: 20px;
            bottom: 20px;
            height: 0;
            padding: 0;
            border: 0;
        }
        .ui-checkboxradio-icon{
            display: none;
        }
    </style>
</head>
<body>
    <span class="glyphicon glyphicon-repeat" id="loading"></span>
    <div class="total">
        <div class="nav">
            <div class="nav-left">
                <h1 class="date"></h1>
                <div id="radio">
                    <input type="radio" id="radio1" name="radio"><label for="radio1"></label>
                    <input type="radio" id="radio2" name="radio"><label for="radio2">今天</label>
                    <input type="radio" id="radio3" name="radio"><label for="radio3"></label>
                    <input type="radio" id="radio4" name="radio"><label for="radio4"></label>
                    <input type="radio" id="radio5" name="radio"><label for="radio5"></label>
                    <input type="radio" id="radio6" name="radio"><label for="radio6">选择日期</label>
                    <input type="text" id="date" name="date"><label for="date">
                </div>
            </div>
            <div class="nav-right">
                <p>0项未完成</p>
                <p>显示已完成</p>
            </div>
        </div>
        <hr/>
        <main>
            <ul id="sortable" class="paixu">
            </ul>
        </main>
        <hr/>
        <footer>
            <input type="text" id="txt" placeholder="请输入内容">
            <button class="submit" onclick="clickHandle()">提交</button>
        </footer>
    </div>
    <script>
        var selectedDataID = new Date()

        setTimeout(function(){
            $('.total').css("display","block")
            $('#loading').css("display","none")
        },1000)

        $(function () {

            $("#radio,#date").buttonset();
            $("#sortable").sortable();
            $("#sortable").disableSelection();
            $( "#date" ).datepicker({"dateFormat":"yy-mm-dd"});

            $( "#sortable" ).sortable({placeholder: "ui-state-highlight"});
            $( "#sortable" ).disableSelection();            

            $("#radio6").click(function(){
                $("#date").focus()
            })

            
        });
        function clickHandle(){
                var txt = $("#txt").val()
                if(!txt.trim()){
                    alert("不能为空")
                    return;
                }
                setLocalData(selectedDataID,txt);
                load(selectedDataID)
            }
        function dateManage(date){
            var year = date.getFullYear()
            var month = date.getMonth()
            var day = date.getDate()
            month = month>9?month:'0'+month;
            day = day>9?day:'0'+day;
            date = year+''+month+day;
            return date;
        }
        function getLocalData(date){
            date = dateManage(date)
            var data = localStorage.getItem(date)
            return JSON.parse(data)
        }
        function setLocalData(date,data){
            var noteList = []
            if(getLocalData(date)){
                noteList = getLocalData(date);
            }
            date = dateManage(date)
            noteList.push(data)
            localStorage.setItem(date,JSON.stringify(noteList));
        }
        function load(date){
            var noteList = getLocalData(date);
            $( "#sortable" ).html('')
            if(!noteList){
                return;
            }
            noteList.forEach(function(item){
                $(`<li class="ui-state-default">${item}</li>`).appendTo($( "#sortable" ))
            })
        } 
        function getToday(){
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            var week = date.getDay()
            function getWeek(week){
                week = week > 6 ? week - 7 : week;
                week = week < 0 ? week + 7 : week;
                var newWeek;
                switch(week){
                    
                    case 0:newWeek="周日";break;
                    case 1:newWeek="周一";break;
                    case 2:newWeek="周二";break;
                    case 3:newWeek="周三";break;
                    case 4:newWeek="周四";break;
                    case 5:newWeek="周五";break;
                    case 6:newWeek="周六";break;
                }
                return newWeek;
            }
            $('.date').text(`${year}年${month}月${day}日 ${getWeek(week)}`)
            $('#radio1').next().text(getWeek(week-1)).data('dataID',new Date(date-24*60*60*1000))
            $('#radio2').next().data('dataID',date)
            $('#radio3').next().text(getWeek(week+1)).data('dataID',new Date(date-0+24*60*60*1000))
            $('#radio4').next().text(getWeek(week+2)).data('dataID',new Date(date-0+48*60*60*1000))
            $('#radio5').next().text(getWeek(week+3)).data('dataID',new Date(date-0+72*60*60*1000))

            $('[name=radio]').next().click(function(){
                if(!$(this).data('dataID')){
                    return;
                }
                console.log($(this).data('dataID'))
                selectedDataID = $(this).data('dataID')
                load(selectedDataID)
            })
            $("#date").on("change",function(){
                var dateList = $("#date").val().split('-')
                selectedDataID = new Date(new Date().setFullYear(dateList[0],dateList[1]-1,dateList[2]))
                load(selectedDataID)
            })
        }
        getToday()
        load(selectedDataID)
        

    </script>
</body>
</html>